<template>
  <div class="listDetail">
    <ListDetailHeader :songObj="songObj" />
    <div class="headTitle">歌词列表</div>
    <ListDetailMain :songId="songId" :playing="playing" :songObj="songObj" @play-audio="$emit('play-audio',$event)" @play-list="$emit('play-list',$event)" />
    <div class="headTitle" :comments="comments">最新评论({{comments.length}})</div>
    <ListDetailFooter :comments="comments" />
    <!-- <div class="fixed" v-if="!playing">
      <div>
        <img src="../images/logo.png" alt="">
        <span>收藏歌单</span>
      </div>
    </div> -->
  </div>
</template>

<script>
import ListDetailHeader from "@/components/ListDetailHeader.vue";
import ListDetailMain from "@/components/ListDetailMain.vue";
import ListDetailFooter from "@/components/ListDetailFooter.vue";
export default {
  components: {
    ListDetailHeader,
    ListDetailMain,
    ListDetailFooter,
  },
  props: {
    item: Object,
    playing:Boolean,
    songId:Number,
  },
  data() {
    return {
      songObj: {},
      comments:[]
    };
  },
  methods: {
    getSongs(id) {
      this.axios
        .get("https://apis.netstart.cn/music/playlist/detail?id=" + id)
        .then((res) => {
          this.songObj = res.data.playlist;
        });
    },
    getDiscuss(id) {
      this.axios
        .get("https://apis.netstart.cn/music/comment/playlist?id=" + id)
        .then((res) => {
          this.comments = res.data.comments;
        });
    },
  },
  created() {
    this.getSongs(this.$route.query.id);
    this.getDiscuss(this.$route.query.id);
  },
};
</script>

<style lang="less" scoped>
.headTitle{
    background:#eeeff0;
    text-align:left;
    padding: 3px;
    padding-left:10px;
    font-size: 13px;
}
.fixed{
  background-color: white;
  height: 50px;
  border-top: 1px solid #f7cfcf;
  position: fixed;
  top: calc(100vh - 50px);
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;

  &>div{
    background-color: #ff3a3a;
    border-radius: 20px;
    width: 70vw;
    padding: 5px;
    margin: 0 auto;
    color: #ffe7e2;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      transform: scale(0.8);
      margin-right: -3px;
    }
    span{
      transform: scale(0.8);
      margin-left: -3px;
    }
  }
}
</style>